<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dot</title>
	<style>
		.dot {
		  border-radius: 100px;
		  width: 60px;height: 60px;
		  background: #cbcbcb;
		}

		#yuan {
		  position: fixed;
		  width: 30px;
		  height: 30px;
		  background: #cbcbcb;
		}
	</style>

	<script src="lib/jquery/dist/jquery.min.js"></script>

	<script>

	$(function(){


		//圆心坐标
		var x0 = 200,
		  	y0 = 200,
		//弹出半径    
			r = 100;
		$("#yuan").css({
		  top: x0,
		  left: y0
		})

		/**
		 * 根据参数获得一个具有XY坐标的dot对象
		 * @param x0,y0 圆心坐标
		 * @param r 半径
		 * @param a 角度
		 **/
		function createDotByXY(x0, y0, r, a) {
		  var dot = {
		    x: 0,
		    y: 0
		  };
		  dot.x = x0 + r * Math.sin(a * Math.PI / 180);
		  dot.y = y0 + r * Math.cos(a * Math.PI / 180);
		  return dot;
		}

		/**
		 * 使用生成方法在页面生成dot对象
		 * @param  {[type]} dotObject [description]
		 * @return {[type]}           [description]
		 */
		function createDotByTpl(dotObject) {
		  var tpl = $("<div class='dot child'></div>");
		  tpl.css({
		    position: 'fixed',
		    top: dotObject.x - 15,
		    left: dotObject.y - 15
		  });
		  return tpl;
		}

		/**
		 * 生成dot对象的坐标角度
		 * @param  {[type]} num [description]
		 * @return {[type]}     [description]
		 */
		function initAngleByNum(num) {
		  var angleArray = [];
		   var deg = 360 / num;
		  for (var i = 0; i < num; i++){
		    angleArray.push(deg - 90 + deg * i );
		  }
		  return angleArray;
		}


		/**
		 * 初始化dot
		 * @param  {[type]} num [description]
		 * @return {[type]}     [description]
		 */
		function initDots(num){
			var angels = initAngleByNum(num);
			for( var i = 0; i < num; i++ ){
				var d = createDotByTpl(createDotByXY(x0, y0, r, angels[i]));
				d.appendTo('body');
			}
		};

		initDots(8);


	})
	
	</script>
</head>
<body>
	<div class="dot" id="yuan"></div>
</body>
</html>